<template>
  <div>
    <h1 class="test">{{ msg }}</h1>
    <button @click="changeMsg">改变msg的值</button>
    <button @click="destroyedFn">销毁App.vue组件</button>
    <button @click="timerFn">点我，启动定时器</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeMsg(){
      this.msg = "666"
    },
    destroyedFn(){
      // 调用$destroy方法销毁当前组件
      this.$destroy();
    },
    timerFn(){
      this.timer = setInterval(()=>{
        console.log("定时器触发了");
      },2000)
    }
  },
  // 钩子函数：vue内置函数，是伴随着vue生命周期自动执行的函数
  /**
   * vue生命周期有4个阶段，触发8个方法（这8个方法就是钩子函数）
   * 
   * */ 
  data(){
    return {
      msg: "hello vue",
      timer: null
    }
  },
  // 初始化阶段
  beforeCreate(){
    console.log(this.msg); // undefined
    console.log("beforeCreate 初始化了生命周期和事件");
  },
  created(){
    console.log(this.msg); // "hello vue"
    console.log( document.querySelector(".test") ); // null 因为DOM还未挂载到真实DOM中
    console.log("created vue初始化完成  向vue内部注入了data和methods");
    // 一般情况下，我们能够在这个钩子函数中发起ajax请求，获取页面的初始数据
    // 因为数据越早获取到越好，这样可以更快渲染到页面，能够提高用户体验
  },
  // 挂载阶段
  beforeMount(){
    console.log(34,document.querySelector(".test")); // null
    console.log("beforeMount 真实DOM挂载前触发");
  },
  mounted(){
    // 一般情况下，在这个函数中就可以自由操作DOM ，发起请求也是可以。
    console.log(38,document.querySelector(".test")); // <h1 class="test">hello vue</h1>
    console.log("mounted 真实DOM挂载完成后触发");
  },
  // 更新阶段（数据更新，注意：数据必须在dom中使用了才会触发这两个钩子函数）
  beforeUpdate(){
    console.log(document.querySelector(".test").innerHTML); // hello vue
    console.log("beforeUpdata 数据改变后 DOM更新前触发")
  },
  updated(){
    console.log(document.querySelector(".test").innerHTML); // 666
    console.log("updated dom更新后触发");
  },
  // 销毁阶段
  beforeDestroy(){
    // 这里一般可以用来移除全局的事件，比如：注册的全局滚动事件，定时器等等
    console.log("beforDestroy 销毁前触发的钩子函数");
    // 比如销毁定时器
    clearInterval(this.timer)
  },
  destroyed(){
    console.log("destroyed 销毁后触发");
  }


};
</script>

<style>
</style>